<template>
  <el-container class="main-container">
    <!-- width自适应,不然header与aside有间隔 -->
    <el-aside class="aside" width="auto">
      <common-aside/>
    </el-aside>
    <el-container>
      <el-header>
        <common-header/>
      </el-header>
      <common-tags/>
      <el-main>
        <div class="router-view-container">
          <router-view></router-view>
        </div>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import AdminAside from '@/components/admin/AdminAside.vue'
import AdminHeader from '@/components/admin/AdminHeader.vue'
import AdminTags from "@/common/tabTags.vue" ;
export default {
  data(){
    return{}
  },
  components:{
    CommonAside: AdminAside,
    CommonHeader: AdminHeader,
    CommonTags: AdminTags
  }
}
</script>

<style  scoped>
.main-container {
  height: 100vh;
  display: flex;
  flex-direction: row;
}

.aside {
  flex: 0 0 auto;
}

.el-header{
  padding:0;
}
.router-view-container {
  height: calc(100vh - 100px);
}
</style>
